<template>
  <div style="height: 100%">
    <div class="vxe-top">
      <div>
        <span class="top-1">{{ title }}</span>
        <span class="top-2"
          >共<span style="color: #409eff"
            >&nbsp;{{ state.pageconfig.total }}&nbsp;</span
          >个记录</span
        >
      </div>
      <div class="right-caozuo">
        <div
          style="margin-left: 20px; cursor: pointer"
          v-if="router.currentRoute.value.fullPath == '/yygl'"
        >
          <el-button @click="addFn" link style="color: #409eff"
            ><el-icon size="18" class="icons iconfont icon-xinzeng"></el-icon>
            新增</el-button
          >
        </div>
        <div style="margin-left: 20px; cursor: pointer">
          <el-button @click="delAllFn" link
            ><Delete size="18" style="width: 1em; height: 1em; color: red" />
            <span style="color: red; margin-left: 5px">删除</span>
          </el-button>
        </div>
        <div style="cursor: pointer; margin-left: 20px">
          <el-dropdown @command="daochu" ref="dropdown1">
            <div style="display: flex; align-items: center">
              <el-icon
                size="18"
                style="color: rgba(77, 151, 255, 1)"
                class="icons iconfont icon-daochu"
              ></el-icon>
              <div style="color: rgba(77, 151, 255, 1)">导出</div>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="dangqian">导出当前</el-dropdown-item>
                <el-dropdown-item command="quanbu">导出全部</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div style="margin-left: 20px; cursor: pointer">
          <el-dropdown @command="dayin" ref="dropdown1">
            <div style="display: flex; align-items: center">
              <span class="dy">
                <el-icon
                  size="18"
                  style="color: rgba(77, 151, 255, 1)"
                  class="icons iconfont icon-daying"
                ></el-icon>
              </span>
              <div style="color: rgba(77, 151, 255, 1)">打印</div>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="dangqian">打印当前</el-dropdown-item>
                <el-dropdown-item command="quanbu">打印全部</el-dropdown-item>
                <el-dropdown-item command="shezhi">打印设置</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div style="margin-left: 20px">
          <el-button style="color: #409eff" link @click="pageSet">
            <!-- <img
                style="margin-right: 5px"
                src="@/assets/images/设置.png"
                alt=""
              /> -->
            <el-icon
              size="18"
              class="icons iconfont icon-biaogeshezhi"
            ></el-icon>
            表格设置</el-button
          >
        </div>
      </div>
    </div>
    <!-- table表格 -->
    <div style="height: 100%">
      <el-table
        id="printArea"
        ref="xGrid"
        :data="state.tableData"
        :row-style="rowStyle"
        :header-cell-style="{ fontSize: state.tableZihao + 'px' }"
        :stripe="state.tableBanmachange ? true : false"
        :border="state.tableBorder ? true : false"
        row-key="id"
        @selection-change="handleSelectionChange"
        style="width: 100%; height: calc(100% - 125px)"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" width="65"></el-table-column>
        <el-table-column
          sortable
          v-for="(item, index) in computedHeades"
          :width="item.width ? item.width : ''"
          :key="index"
          :prop="item.field"
          :label="item.title"
          show-overflow-tooltip
        >
          <!-- 预约管理-预约模式 -->
          <template
            v-if="
              router.currentRoute.value.fullPath == '/yygl' &&
              item.field === 'appointmentType'
            "
            #default="{ row }"
          >
            {{
              row.appointmentType == 0
                ? "单次播放"
                : row.appointmentType == 1
                ? "每天播放"
                : row.appointmentType == 2
                ? "每周播放"
                : row.appointmentType == 3
                ? "每月播放"
                : row.appointmentType == 4
                ? "循环播放"
                : ""
            }}
          </template>
          <!-- 预约管理-播放模式 -->
          <template
            v-if="
              router.currentRoute.value.fullPath == '/yygl' &&
              item.field === 'playType'
            "
            #default="{ row }"
          >
            {{ row.playType == 0 ? "计次" : row.playType == 1 ? "计时" : "" }}
          </template>
          <!-- 预约管理-运行状态 -->
          <template
            #default="{ row }"
            v-if="
              router.currentRoute.value.fullPath == '/yygl' &&
              item.field == 'triggerStatus'
            "
          >
            <span
              :style="{ color: row.triggerStatus == 0 ? 'red' : '#409EFF' }"
              >{{ row.triggerStatus == 0 ? "停止" : "开始" }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          :width="router.currentRoute.value.fullPath == '/yygl' ? '220px' : ''"
          prop=""
          label="操作"
        >
          <template #default="{ row }">
            <el-button
              style="color: #409eff"
              v-for="(item, index) in caozuoList"
              :key="item"
              link
              @click="caozuoClick(item.caozuoType, row)"
            >
              <span>{{ item.label }}</span>
            </el-button>
            <el-button
              style="color: #409eff"
              v-if="
                row.triggerStatus == 0 &&
                router.currentRoute.value.fullPath == '/yygl'
              "
              link
              @click="caozuoClick('startPlan', row)"
            >
              <span>开始计划</span>
            </el-button>
            <el-button
              style="color: #409eff"
              v-if="
                row.triggerStatus == 1 &&
                router.currentRoute.value.fullPath == '/yygl'
              "
              link
              @click="caozuoClick('stopPlan', row)"
            >
              <span>停止计划</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="position: absolute; bottom: 18px">
        <el-pagination
          v-model:current-page="state.pageconfig.currentPage"
          v-model:page-size="state.pageconfig.pageSize"
          :page-sizes="[10, 20, 30, 50, 100]"
          :size="size"
          background
          layout="prev, pager, next, sizes, jumper, total"
          :total="state.pageconfig.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 表格设置 -->
    <el-dialog
      draggable
      v-model="state.tableSetFlag"
      width="50%"
      title="表格设置"
      :close-on-click-modal="false"
      :before-close="tableSetClose"
    >
      <div class="w100 fbc" style="margin-bottom: 10px">
        <div>
          <span>显示边框</span>
          <el-switch v-model="state.tableBorder"></el-switch>
        </div>
        <!-- <div>
          <span>表头颜色</span>
          <el-switch
            v-model="state.tableHeader"
          ></el-switch>
          <el-color-picker
            v-model="state.headerColor"
            size="small"
          />
        </div> -->
        <div>
          <span>间隔行颜色</span>
          <el-switch v-model="state.tableBanmachange"></el-switch>
          <!-- <el-color-picker
            v-model="state.banmaColor"
            size="small"
          /> -->
        </div>
        <div>
          <el-dropdown
            @command="tablemiduFn"
            ref="dropdown1"
            style="margin-right: 20px"
          >
            <div style="display: flex; align-items: center; cursor: pointer">
              <span>表格密度</span>
              <img
                style="vertical-align: middle; margin-left: 5px"
                src="@/assets/images/表格密度.png"
                alt=""
              />
              <span style="margin-left: 5px">{{
                state.tableHeight == "56"
                  ? "宽松"
                  : state.tableHeight == "48"
                  ? "默认"
                  : state.tableHeight == "40"
                  ? "紧凑"
                  : ""
              }}</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="kuanson">宽松</el-dropdown-item>
                <el-dropdown-item command="zhondeng">默认</el-dropdown-item>
                <el-dropdown-item command="jincou">紧凑</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <el-dropdown
          @command="tablezihaoFn"
          ref="dropdown1"
          style="margin-right: 20px"
        >
          <div style="display: flex; align-items: center; cursor: pointer">
            <span>表格字号</span>
            <img
              style="vertical-align: middle; margin-left: 5px"
              src="@/assets/images/字号.png"
              alt=""
            />
            <span style="margin-left: 5px">{{ state.tableZihao + "px" }}</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="teda">特大 18px</el-dropdown-item>
              <el-dropdown-item command="zhondeng">中等 16px</el-dropdown-item>
              <el-dropdown-item command="moren">默认 14px</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div>
        <el-table
          :data="state.tableContent"
          ref="xGridDialog"
          :stripe="state.tableBanmachange ? true : false"
          :row-style="rowStyle"
          :header-cell-style="{ fontSize: state.tableZihao + 'px' }"
          :border="state.tableBorder ? true : false"
          height="520px"
        >
          <el-table-column label="拖动排序" field="" align="center">
            <template #default="{ row }">
              <img class="rowSortable" src="@/assets/images/排序.png" alt="" />
            </template>
          </el-table-column>
          <el-table-column
            label="列名"
            prop="title"
            align="center"
          ></el-table-column>
          <el-table-column label="是否显示" prop="show" align="center">
            <template #default="{ row }">
              <el-switch
                v-model="row.show"
                :inactive-value="0"
                :active-value="1"
                active-text="是"
                inactive-text="否"
                inline-prompt
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="是否固定" prop="width" align="center">
            <template #default="{ row }">
              <span class="tableGuding" v-if="row.left_flag">固定左侧</span>
              <img
                @click="gudingFn(row, 'left')"
                v-else
                class="tableGuding image"
                src="@/assets/images/固定左侧.png"
                alt=""
              />
              <span class="tableGuding" v-if="row.center_flag">不固定</span>
              <img
                @click="gudingFn(row, 'center')"
                v-else
                class="tableGuding image"
                src="@/assets/images/不固定.png"
                alt=""
              />
              <span class="tableGuding" v-if="row.right_flag">固定右侧</span>
              <img
                @click="gudingFn(row, 'right')"
                v-else
                class="image"
                src="@/assets/images//固定右侧.png"
                alt=""
              />
            </template>
          </el-table-column>
          <el-table-column label="列宽" prop="width" align="center">
            <template #default="{ row }">
              <el-input
                @change="liekuanChangeFn(row)"
                v-model="row.width"
                placeholder="请输入列宽"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="tableSetClose">取消</el-button>
          <el-button type="primary" @click="tableSetSubmit"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 打印设置 -->
    <el-dialog
      width="60%"
      draggable
      v-model="state.dayinSetFlag"
      title="打印设置"
    >
      <tablePrintSet
        ref="printSetRef"
        @titleShowFn="titleShowFn"
        @closeFn="closeFn"
        @cancleFn="cancleFn"
        :state2="state2"
      ></tablePrintSet>
    </el-dialog>
    <!-- 导出 -->
    <div style="height: 0px" id="mytable1">
      <el-table
        id="daochuArea"
        :data="state.tableDataAll"
        :row-style="rowStyle"
        :header-cell-style="{ fontSize: state.tableZihao + 'px' }"
        :stripe="state.tableBanmachange ? true : false"
        :border="state.tableBorder ? true : false"
        row-key="id"
        @selection-change="handleSelectionChange"
        style="width: 100%; height: calc(100% - 125px)"
      >
        <el-table-column
          sortable
          v-for="(item, index) in computedHeades"
          :width="item.width ? item.width : ''"
          :key="index"
          :prop="item.field"
          :label="item.title"
          show-overflow-tooltip
        >
          <!-- 预约管理-预约模式 -->
          <template
            v-if="
              router.currentRoute.value.fullPath == '/yygl' &&
              item.field === 'appointmentType'
            "
            #default="{ row }"
          >
            {{
              row.appointmentType == 0
                ? "单次播放"
                : row.appointmentType == 1
                ? "每天播放"
                : row.appointmentType == 2
                ? "每周播放"
                : row.appointmentType == 3
                ? "每月播放"
                : row.appointmentType == 4
                ? "循环播放"
                : ""
            }}
          </template>
          <!-- 预约管理-播放模式 -->
          <template
            v-if="
              router.currentRoute.value.fullPath == '/yygl' &&
              item.field === 'playType'
            "
            #default="{ row }"
          >
            {{ row.playType == 0 ? "计次" : row.playType == 1 ? "计时" : "" }}
          </template>
          <!-- 预约管理-运行状态 -->
          <template
            #default="{ row }"
            v-if="
              router.currentRoute.value.fullPath == '/yygl' &&
              item.field == 'triggerStatus'
            "
          >
            <span
              :style="{ color: row.triggerStatus == 0 ? 'red' : '#409EFF' }"
              >{{ row.triggerStatus == 0 ? "停止" : "开始" }}</span
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { nextTick, onMounted, reactive } from "vue";
import axios from "@/utils/request";
import usepagesStore from "@/store/modules/pages";
import { useRouter } from "vue-router";
import Sortable from "sortablejs";
import dayjs from "dayjs";
import tablePrintSet from "./table-print-set";
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
import printJS from 'print-js'
const { proxy } = getCurrentInstance();
let xGridDialog = ref(null);
let xGrid = ref(null);
let router = useRouter();
const userStore = usepagesStore();
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  tableheads_show: {
    default: () => [],
    require: true,
  },
  listUrl: {
    type: String,
    default: "",
  },
  caozuoList: {
    type: Array,
    default: () => [],
  },
});
let state = reactive({
  pageconfig: {
    currentPage: 1,
    pageSize: 10,
    total: 0,
  },
  tableData: [],
  tableDataAll: [],
  searchData: {},
  tableContent: props.tableheads_show,
  //表格设置
  tableSetFlag: false,
  tableBorder: true,
  tableHeader: true,
  tableBanmachange: true,
  tableZihao: 14,
  tableHeight: "48",
  headerColor: "#F3F3F3", //表头颜色
  banmaColor: "#F3F3F3", //间隔行颜色
  //打印设置
  dayinSetFlag: false,
});
let state2 = reactive({
  tableTitle: state.tableContent,
  tableData: [],
  // tableTitle: [],
  fontSet: [
    {
      title: "标题栏",
      fontFamily: "新宋体",
      fontSize: "22px",
      fontAlign: "center",
    },
    {
      title: "副标题",
      fontFamily: "新宋体",
      fontSize: "16px",
      fontAlign: "center",
    },
    {
      title: "内容",
      fontFamily: "新宋体",
      fontSize: "10.5px",
      fontAlign: "center",
    },
    {
      title: "签名栏",
      fontFamily: "微软雅黑",
      fontSize: "16px",
      fontAlign: "right",
    },
  ],
  signData: [
    { text: "制表人" },
    { text: "" },
    { text: "" },
    { text: "" },
    { text: "" },
    { text: "" },
    { text: "" },
    { text: "" },
  ],
  titleSet: props.title,
  pageSet: {
    type: "A4竖版",
    top: 0.5,
    bottom: 0.5,
    left: 0.5,
    right: 0.5,
  },
});
setTimeout(() => {
  state2.tableData = state.tableData;
  state2.tableTitle = state.tableContent;
}, 500);
const emit = defineEmits([
  // "pagechange",
  // "delAllFn",
  // "delFn",
  // "xiugai",
  // "shanchu",
  // "tiaozheng",
  // "qiehuanFn",
  // "rizhiFn",
  // "yuyueqiehuanFn",
  // "tablePrintFn",
]);
// 多选事件
const handleSelectionChange = (selection) => {
  // state.selectedRows = selection
  userStore.records = selection;
  console.log("多选:", userStore.records);
};
//分页
function handleSizeChange(val) {
  // console.log(val, "当前页");
  state.pageconfig.pageSize = val;
  getList();
}
function handleCurrentChange(val) {
  // console.log(val, "当前页");
  state.pageconfig.currentPage = val;
  getList();
}
// 操作按钮
function caozuoClick(type, row) {
  // 获取到该行的数据
  emit(type, row);
}
//表格右侧操作
function addFn() {
  emit("addFn");
}
function delAllFn() {
  emit("delAllFn");
}
//导出
function getdcList(val) {
  let obj = {};
  if (val == "dangqian") {
    obj.pageNum = state.pageconfig.currentPage;
    obj.pageSize = state.pageconfig.pageSize;
  } else {
    obj.pageNum = 1;
    obj.pageSize = 9999;
  }
  axios
    .post(props.listUrl, {
      ...obj,
      ...state.searchData,
    })
    .then((res) => {
      if (res.data?.list?.length >= 0) {
        state.tableDataAll = res.data.list;
        setTimeout(() => {
        let xlsxParam = { raw: true }; //此行代码可解决导出时时间，身份证错乱问题
        const ws = XLSX.utils.table_to_sheet(
          document.getElementById("daochuArea"),
          xlsxParam
        );
        /* 新建工作簿并添加工作表 */
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
        /* 生成Excel文件 */
        const wbout = XLSX.write(wb, { bookType: "xlsx", type: "binary" });
        /* 字符串转ArrayBuffer */
        function s2ab(s) {
          const buf = new ArrayBuffer(s.length);
          const view = new Uint8Array(buf);
          for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
          return buf;
        }
        /* 保存文件 */
        FileSaver.saveAs(
          new Blob([s2ab(wbout)], { type: "application/octet-stream" }),
          props.title + ".xlsx"
        );
      },1000)
      }
    });
}
function daochu(type) {
    if (type == "dangqian") {
      getdcList(type);
    } else {
      getdcList(type);
    }
}
//打印
function getdyList(val) {
  let obj = {};
  if (val == "dangqian") {
    obj.pageNum = state.pageconfig.currentPage;
    obj.pageSize = state.pageconfig.pageSize;
  } else {
    obj.pageNum = 1;
    obj.pageSize = 9999;
  }
  axios
    .post(props.listUrl, {
      ...obj,
      ...state.searchData,
    })
    .then((res) => {
      if (res.data?.list?.length >= 0) {
        state.tableDataAll = res.data.list;
        setTimeout(() => {
  //         print({
  //   element: '#daochuArea',
  //   pageBreak: 'auto',
  //   printable: document.getElementById('daochuArea').innerHTML,
  //   type: 'html',
  //   onPrinted: () => console.log('全部内容打印完成')
  // });
   let userAgent = navigator.userAgent;
        //判断是否Firefox浏览器
        if (userAgent.indexOf("Firefox") > -1) {
          console.log('Firefox')
          printJS({
            printable: 'mytable1', // 标签元素id
            type: 'html',
            header: '',
            style: `@page {size:auto;margin-top:100px; margin-left:15px; margin-right: 15px;}
            thead th {
              border-top: 1px solid #000;
              border-right: 1px solid #000;
              border-left: 1px solid #000;
            }
            tbody td {
              border: 1px solid #000;
            }
            tbody {
              text-align: center;
            }
            table {
              border-collapse: collapse;
            }`,
          });
        }
        //判断是否chorme浏览器
        if (userAgent.indexOf("Chrome") > -1){
          console.log('Chrome')
          printJS({
            printable: 'mytable1', // 标签元素id
            type: 'html',
            header: '',
            documentTitle: '',
            style: `@page {size:auto;margin-top:100px; margin-left:5px; margin-right: 15px;}
            thead th {
              border-top: 1px solid #000;
              border-right: 1px solid #000;
              border-left: 1px solid #000;
            }
            tbody td {
              border: 1px solid #000;
            }
            tbody {
              text-align: center;
            }
            table {
              border-collapse: collapse;
            }`,
          });
        }
        //判断是否IE浏览器
        if (!!window.ActiveXObject || "ActiveXObject" in window) {
          console.log('IE')
          printJS({
            printable: 'mytable1', // 标签元素id
            type: 'html',
            header: '',
            style: `@page {size:auto;margin-top:100px; margin-left:15px; margin-right: 15px;}
            thead th {
              border-top: 1px solid #000;
              border-right: 1px solid #000;
              border-left: 1px solid #000;
            }
            tbody td {
              border: 1px solid #000;
            }
            tbody {
              text-align: center;
            }
            table {
              border-collapse: collapse;
            }`,
          });
        }
        },1000)
      }
    });
}
function dayin(type) {
  if (type == "dangqian") {
    getdyList(type)
    
  } else if (type == "quanbu") {
    getdyList(type)
  } else if (type == "shezhi") {
    state.dayinSetFlag = true;
  }
}
function cancleFn() {
  state.dayinSetFlag = false;
  tableSetSubmit();
}
function closeFn() {
  state.dayinSetFlag = false;
}
function titleShowFn(val) {
  state.tableContent = val;
}
//表格设置
function columnDrop(dom) {
  //拖拽行
  Sortable.create(dom.$el.querySelector(".el-table__body-wrapper tbody"), {
    handle: ".rowSortable", //只有包含.rowSortable 样式的元素才可以被拖动
    onEnd: ({ newIndex, oldIndex }) => {
      const currRow = state.tableContent.splice(oldIndex, 1)[0];
      state.tableContent.splice(newIndex, 0, currRow);
    },
  });
}
const pageSet = () => {
  state.tableSetFlag = true;
  nextTick(() => {
    columnDrop(xGridDialog.value);
  });
};
const tableSetClose = () => {
  state.tableSetFlag = false;
};
function tablemiduFn(e) {
  //表格密度
  if (e == "kuanson") {
    state.tableHeight = 56;
  } else if (e == "zhondeng") {
    state.tableHeight = 48;
  } else if (e == "jincou") {
    state.tableHeight = 40;
  }
}
function rowStyle({ row, rowIndex }) {
  return {
    height: state.tableHeight + "px",
    fontSize: state.tableZihao + "px",
  };
}
function tablezihaoFn(e) {
  if (e == "teda") {
    state.tableZihao = 18;
  } else if (e == "zhondeng") {
    state.tableZihao = 16;
  } else if (e == "moren") {
    state.tableZihao = 14;
  }
}
//是否固定
function gudingFn(row, val) {
  // 是否固定
  if (val == "left") {
    row.left_flag = true;
    row.center_flag = false;
    row.right_flag = false;
  }
  if (val == "center") {
    row.left_flag = false;
    row.center_flag = true;
    row.right_flag = false;
  }
  if (val == "right") {
    row.left_flag = false;
    row.center_flag = false;
    row.right_flag = true;
  }

  state.tableContent.forEach((item, index) => {
    if (item.title == row.title) {
      state.tableContent.splice(index, 1);
      setTimeout(() => {
        if (val == "left") {
          state.tableContent.unshift(row);
        } else if (val == "center") {
          state.tableContent.push(row);
        } else if (val == "right") {
          state.tableContent.push(row);
        }
      }, 50);
    }
  });
}
//列宽
function liekuanChangeFn(row) {
  state.tableContent.forEach((item, index) => {
    if (item.title == row.title) {
      state.tableContent.splice(index, 1);
      setTimeout(() => {
        if (index == 0) {
          state.tableContent.unshift(item);
        } else {
          state.tableContent.splice(index, 0, item);
        }
      }, 50);
    }
  });
}
function tableSetSubmit() {
  localStorage.setItem(
    `${props.title}_ShowBorders`,
    JSON.stringify(state.tableBorder)
  ); //显示边框
  localStorage.setItem(
    `${props.title}_ZebraPatternTable`,
    JSON.stringify(state.tableBanmachange)
  ); //斑马纹表格
  localStorage.setItem(
    `${props.title}_ShowHeight`,
    JSON.stringify(state.tableHeight)
  ); //表格密度
  localStorage.setItem(
    `${props.title}_ShowZihao`,
    JSON.stringify(state.tableZihao)
  ); //表格字号
  axios
    .post("/vxeheaders/setHeaders", {
      headers: state.tableContent,
    })
    .then((res) => {
      if (res.code == 200) {
        proxy.$modal.msgSuccess("设置成功！");
        state.tableSetFlag = false;
      }
    });
}
watch(
  () => props.tableheads_show,
  (newVal, oldVal) => {
    state.tableContent = newVal;
    console.log(state.tableContent, "state.tableContent");
  }
);
//表格设置
let computedHeades = computed(() => {
  //动态显隐表头
  console.log(state.tableContent, "computed动态显隐表头");
  console.log(props.tableheads_show, "props.tableheads_show999");
  return state.tableContent.filter((i) => i.show == true || i.show === 1);
});
function getList() {
  axios
    .post(props.listUrl, {
      pageNum: state.pageconfig.currentPage,
      pageSize: state.pageconfig.pageSize,
      ...state.searchData,
    })
    .then((res) => {
      if (res.data?.list?.length >= 0) {
        state.tableData = res.data.list;
        state.pageconfig.total = res.data.total;
      }
    });
}
defineExpose({ state, getList });
onMounted(() => {
  console.log(state.tableContent, "tableheads_show");
  getList();
  let tableBorder = localStorage.getItem(`${props.title}_ShowBorders`);
  if (tableBorder) {
    //边框
    state.tableBorder = JSON.parse(tableBorder);
  }
  let tableBanmachange = localStorage.getItem(
    `${props.title}_ZebraPatternTable`
  );
  if (tableBanmachange) {
    //斑马纹
    state.tableBanmachange = JSON.parse(tableBanmachange);
  }
  let tableHeight = localStorage.getItem(`${props.title}_ShowHeight`);
  if (tableHeight) {
    //表格密度
    state.tableHeight = JSON.parse(tableHeight);
  }
  let tableZihao = localStorage.getItem(`${props.title}_ShowZihao`);
  if (tableZihao) {
    //表格字号
    state.tableZihao = JSON.parse(tableZihao);
  }
});
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 0 20px 20px;
}
::v-deep .el-switch {
  margin: 0 5px;
}
.vxe-top {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  .top-1 {
    font-weight: 700;
  }
  .top-2 {
    margin-left: 15px;
    font-size: 14px;
  }
  .right-caozuo {
    display: flex;
    align-items: center;
  }
}
/* 打印时隐藏非表格内容 */
@media print {
  body * {
    visibility: hidden;
  }
  #daochuArea, #daochuArea * {
    visibility: visible;
  }
  #daochuArea {
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>